<html>  
<head>
  <title>Work In Progress</title>
  <style>
    body {
      margin:0px;
      padding:0px;
      text-align:center;
    }
    
    canvas{
		outline:0;
		margin-left: auto;
		margin-right: auto;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
  <script> 
	/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
	 * Build: http://modernizr.com/download/#-canvas-touch-teststyles-prefixes
	 */
	;window.Modernizr=function(a,b,c){function v(a){i.cssText=a}function w(a,b){return v(l.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l=" -webkit- -moz- -o- -ms- ".split(" "),m={},n={},o={},p=[],q=p.slice,r,s=function(a,c,d,e){var h,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),l.appendChild(j);return h=["&#173;",'<style id="s',g,'">',a,"</style>"].join(""),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=f.style.overflow,f.style.overflow="hidden",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i},t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},m.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:s(["@media (",l.join("touch-enabled),("),g,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var A in m)u(m,A)&&(r=A.toLowerCase(),e[r]=m[A](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),h=j=null,e._version=d,e._prefixes=l,e.testStyles=s,e}(this,this.document);
   </script>
</head>

<body>
<canvas id='c'>Your browser does not support canvas. Consider updating your browser.</canvas>
<script>

var CANVAS_SCALE = 2/3;
var width = window.innerWidth * CANVAS_SCALE;
var height = window.innerHeight * CANVAS_SCALE;
var c = document.getElementById('c');
c.style.top = (window.innerHeight-height)/2 + "px";
var gLoop;
var ctx = c.getContext('2d');
var EMAIL_SPACED = '  h  e  l  l  o   @  a  b  r  a  h  a  m  c  h  a  n  .  i  n  f  o  ';
var array = EMAIL_SPACED.split("");
var letterX = width/2;
var letterY = height/2;
var snake = [];
var SPEED = 12;
var dirX = 1;
var dirY = 0;
var CHAR_OFFSET = 20;
var OFFSCREEN_POINT = -100;
var INITIAL_COUNT = 2;
var arrCount = INITIAL_COUNT;
var FPS = 24;
var FPS_DELAY = 1000/FPS;
var cTop = (window.innerHeight-height)/2;
var cLeft = (window.innerWidth-width)/2;

snake.push([0, height/2]);
c.width = width;
c.height = height;
 
var clear = function(){
	ctx.fillStyle = '#000000';
	ctx.clearRect(0, 0, width, height);
	ctx.beginPath();
	ctx.rect(0, 0, width, height);
	ctx.closePath();
	ctx.fill();
}

var DrawSnake = function() {
	ctx.fillStyle = '#FFFFFF';
	ctx.beginPath();
	if (arrCount < array.length) {
		ctx.rect(snake[0][0],snake[0][1],CHAR_OFFSET,CHAR_OFFSET);
	} else {
		ctx.textAlign= "end";
		ctx.fillText(String.fromCharCode(0x2605), snake[0][0], snake[0][1] + CHAR_OFFSET);
	}
	for (var i = 1; i < snake.length; i++) {
		ctx.fillText(array[i-1], snake[i][0], snake[i][1]);
	}
	ctx.closePath();
	ctx.fill();
};

var MoveSnake = function() {
	for (var i = snake.length -1; i > 1; i--) {
		snake[i][0] = snake[i-1][0];
		snake[i][1] = snake[i-1][1];
	}
	if (snake.length > 1) {
		snake[1][0] = snake[0][0] + CHAR_OFFSET/2;
		snake[1][1] = snake[0][1] + CHAR_OFFSET;
	}
	snake[0][0] = snake[0][0] + SPEED * dirX;
	snake[0][1] = snake[0][1] + SPEED * dirY;

	if (snake[0][0] < 0) {
		snake[0][0] = width;
	}
	if (snake[0][0] > width) {
		snake[0][0] = 0;
	}
	if (snake[0][1] < 0) {
		snake[0][1] = height;
	}
	if (snake[0][1] > height) {
		snake[0][1] = 0;
	}
};

var DrawLetter = function() {
	if (arrCount < array.length) {
		ctx.fillStyle = '#FFFFFF';
		ctx.font = '20pt Arial';
		ctx.beginPath();
		ctx.fillText(array[arrCount], letterX, letterY);
		ctx.closePath();
		ctx.fill();
	} 
};

var TestLetterCollide = function() {
	if (arrCount < array.length) {
		if ((snake[0][0] + CHAR_OFFSET >= letterX) && (snake[0][0] <= letterX + CHAR_OFFSET) ){
			if ((snake[0][1] + CHAR_OFFSET >= letterY - CHAR_OFFSET) && (snake[0][1] < letterY)){
				letterX = Math.random() * (width - CHAR_OFFSET*2) + CHAR_OFFSET;
				letterY = Math.random() * (height - CHAR_OFFSET*2) + CHAR_OFFSET;
				snake.push([snake[0][0],snake[0][1]]);
				arrCount++;
				while (array[arrCount] == ' ') {
					snake.push([OFFSCREEN_POINT,OFFSCREEN_POINT]);
					arrCount++;
				}
			}
		}
	}
};

var DrawInstructions = function() {
	if (arrCount == INITIAL_COUNT) {
		ctx.fillStyle = '#A9A9AD';
		ctx.font = '20pt Arial';
		ctx.beginPath();
		ctx.textAlign="center";
		if (Modernizr.touch) {
			ctx.fillText("Tap sides to change direction", width/2, height/2 - 100);
			ctx.fillText(String.fromCharCode(0x2190), 100, height/2); //left
			ctx.fillText(String.fromCharCode(0x2191), width/2, 100); //up
			ctx.fillText(String.fromCharCode(0x2192), width-100, height/2); //right
			ctx.fillText(String.fromCharCode(0x2193), width/2, height-100); //down
		} else {
			ctx.fillText("WASD keys to change direction", width/2, height/2 - 100);
		}
		ctx.fillText("Collect the letters", width/2, height/2 + 100);
		ctx.closePath();
		ctx.fill();
	} else if (arrCount >= array.length) {
		ctx.fillStyle = '#A9A9AD';
		ctx.font = '20pt Arial';
		ctx.beginPath();
		ctx.textAlign="center";
		ctx.fillText("Congratulations, thanks for playing!", width/2, 200);
		ctx.closePath();
	}
}

$(document).keydown(function(event) {
 	var key = String.fromCharCode(event.keyCode);
	switch(event.keyCode) {
	case 87: //W
		dirX = 0;
		dirY = -1;
		break;
	case 83: //S
		dirX = 0;
		dirY = 1;
		break;
	case 65: //A
		dirX = -1;
		dirY = 0;
		break;
	case 68: //D
		dirX = 1;
		dirY = 0;
		break;
	}
 
});

document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
//document.addEventListener('touchmove', function(e) {doTouch(e);}, false);

window.onload = window.onresize = window.onorientationchange = function() {
	var oldWidth = width;
	var oldHeight = height;
	ctx.clearRect(0, 0, width, height);
	c.style.position = "fixed";
	width = window.innerWidth * CANVAS_SCALE;
	height = window.innerHeight * CANVAS_SCALE;
	c.style.top = (window.innerHeight-height)/2 + "px";
	c.style.left = (window.innerWidth-width)/2 + "px";
	letterX = letterX * width/oldWidth;
	letterY = letterY * height/oldHeight;
	cTop = (window.innerHeight-height)/2;
	cLeft = (window.innerWidth-width)/2;
};


function doTouch(event) {
	var touchX = event.touches[0].pageX - cLeft;
	var touchY = event.touches[0].pageY - cTop;
	if (IsInTriangle(touchX,touchY,0,0,width/2,height/2,width,0)) {
		//up
		dirX = 0;
		dirY = -1;
	} else if (IsInTriangle(touchX,touchY,0,height,width/2,height/2,width,height)) {
		//down
		dirX = 0;
		dirY = 1;
	} else if (IsInTriangle(touchX,touchY,0,0,width/2,height/2,0,height)) {
		//left
		dirX = -1;
		dirY = 0;
	} else if (IsInTriangle(touchX, touchY,width,0,width/2,height/2,width,height)) {
		//right
		dirX = 1;
		dirY = 0;
	}
}

var IsInTriangle = function (px,py,ax,ay,bx,by,cx,cy){
	//credit: http://www.blackpawn.com/texts/pointinpoly/default.html
	var v0 = [cx-ax,cy-ay];
	var v1 = [bx-ax,by-ay];
	var v2 = [px-ax,py-ay];
	var dot00 = (v0[0]*v0[0]) + (v0[1]*v0[1]);
	var dot01 = (v0[0]*v1[0]) + (v0[1]*v1[1]);
	var dot02 = (v0[0]*v2[0]) + (v0[1]*v2[1]);
	var dot11 = (v1[0]*v1[0]) + (v1[1]*v1[1]);
	var dot12 = (v1[0]*v2[0]) + (v1[1]*v2[1]);
	var invDenom = 1/ (dot00 * dot11 - dot01 * dot01);
	var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
	var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
	return ((u >= 0) && (v >= 0) && (u + v < 1));
}

var GameLoop = function(){
	clear();
	DrawSnake();
	MoveSnake();
	DrawLetter();
	TestLetterCollide();
	DrawInstructions();
	gLoop = setTimeout(GameLoop, FPS_DELAY);
}

GameLoop();


</script>
</body>
</html>